<template>
  <div class="basic">
    <el-form :model="form" :rules="rules">
      <div class="row">
        <div class="column">
          <el-form-item size="mini" label="户型" :label-width="formLabelWidth">
            <el-select class="apartment" v-model="form.apartment[0]" placeholder=" ">
              <el-option v-for="item in 6" :label="item" :value="item"></el-option>
            </el-select>室
            <el-select class="apartment" v-model="form.apartment[1]" placeholder=" ">
              <el-option v-for="item in 4" :label="item-1" :value="item-1"></el-option>
            </el-select>厅
            <el-select class="apartment" v-model="form.apartment[2]" placeholder=" ">
              <el-option v-for="item in 4" :label="item-1" :value="item-1"></el-option>
            </el-select>卫
            <el-select class="apartment" v-model="form.apartment[3]" placeholder=" ">
              <el-option v-for="item in 4" :label="item-1" :value="item-1"></el-option>
            </el-select>阳
          </el-form-item>
          <el-form-item size="mini" label="建筑面积" :label-width="formLabelWidth">
            <el-input v-model="form.measure" class="leftBorder" autocomplete="off"></el-input>平米
          </el-form-item>
        </div>
        <div class="column">
          <el-form-item size="mini" label="房屋类型" :label-width="formLabelWidth">
            <el-select v-model="form.type" placeholder="请选择房屋类型">
              <el-option v-for="item in options" class="leftBorder" :key="item.value" :label="item.label" :value="item.value"
                ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="mini" label="朝向" :label-width="formLabelWidth">
            <el-select v-model="form.orientation" placeholder="请选择朝向">
              <el-option label="东" value="东"></el-option>
              <el-option label="南" value="南"></el-option>
              <el-option label="西" value="西"></el-option>
              <el-option label="北" value="北"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <el-form-item size="mini" label="装修情况" :label-width="formLabelWidth">
            <el-select v-model="form.status" placeholder="请选择装修情况">
              <el-option label="精装" value="1"></el-option>
              <el-option label="毛坯" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="mini" label="成交价" :label-width="formLabelWidth">
            <el-input v-model="form.dealPrice" autocomplete="off" placeholder="万元"></el-input>
          </el-form-item>
        </div>
        <div class="column">
          <el-form-item size="mini" label="交房时间" :label-width="formLabelWidth">
            <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item size="mini" label="精装价" prop="" :label-width="formLabelWidth">
            <el-input v-model="form.hardcoverPrice" autocomplete="off" placeholder="元/平米"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="row">
        <el-form-item size="mini" label="配套" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.checkedCities1" :min="0" :max="form.matching.length">
            <el-checkbox v-for="city in form.matching" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="isDial = false">保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
          measure:'', //面积
          type:'',     //房屋类型
          orientation:'南', //朝向
          apartment:['1','1','1','1'],  //户型
          status:'',    //装修情况  
          date:'',
          dealPrice:'', //成交价
          hardcoverPrice:'', //精装价
          matching:["中央空调", "地暖", "新风系统", "智能马桶","前置过滤器","净水器","洗碗机","烤箱"],   //类型
          checkedCities1: ["上海", "北京"],   //选中的类型
          options: [{value: '1',label: '平层'}, {value: '2',label: 'LOFT'}, {value: '3',label: '复式'}, { value: '4',label: '排屋'}, {value: '5',label: '别墅'}],
      },
      rules: {
            dealPrice: [{
                pattern: /^(-?\d+)(\.\d+)?$/,
                required: true,
                message: '成交价必须是数字或小数',
                trigger: 'blur'
            }],
            hardcoverPrice: [{
                pattern: /^(-?\d+)(\.\d+)?$/,
                required: true,
                message: '精装价必须是数字或小数',
                trigger: 'blur'
            }]
        },
      formLabelWidth: "80px",
    };
  }
};
</script>
<style lang="less" scoped>
.basic {
  text-align: left;
  .el-input {
    width: 70% !important;
  }
  .row {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    .column {
      float: left;
      width: 50%;
    }
    .column:nth-child(2n) {
      float: right;
    }
    .el-form-item__label {
      font-size: 12px;
      color: #bfcbd9;
    }
  }
  .row:nth-child(2) {
    padding-top: 15px;
  }
  .row:nth-child(3) {
    padding-top: 15px;
    border-bottom: 0px;
  }
  .el-button {
    float: right;
    margin-right: 60px;
    margin-bottom: 20px;
  }
  .el-select {
    width: 70%;
  }
  .half:nth-child(1) {
    margin-right: 10%;
  }
  .half {
    width: 35%;
  }
  .apartment{
      width: 55px;
      margin-right: 3px;
  }
}
</style>


